<template>
  <div>
    <div>
      <el-button type="info" size="small" @click="goBack">返回</el-button>
    </div>
    <el-form
      :model="questionForm"
      label-width="120px"
      :rules="questionFormRules"
      ref="questionFormRef"
    >
      <el-form-item label="题号" prop="num">
        <el-input v-model="questionForm.num" />
      </el-form-item>
      <el-form-item label="单项多选" prop="type">
        <el-radio-group v-model="questionForm.type" class="ml-4">
          <el-radio label="1">单选</el-radio>
          <el-radio label="2">多选</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="题目内容" prop="examQuestion">
        <el-input v-model="questionForm.examQuestion" type="textarea" />
      </el-form-item>
      <el-form-item label="选项A" prop="option1">
        <el-input v-model="questionForm.option1" />
      </el-form-item>
      <el-form-item label="选项B" prop="option2">
        <el-input v-model="questionForm.option2" />
      </el-form-item>
      <el-form-item label="选项C" prop="option3">
        <el-input v-model="questionForm.option3" />
      </el-form-item>
      <el-form-item label="选项D" prop="option4">
        <el-input v-model="questionForm.option4" />
      </el-form-item>
      <el-form-item label="正确选项" prop="correct_id">
        <el-input v-model="questionForm.correct_id" />
      </el-form-item>
      <el-form-item label="解析" prop="analyse">
        <el-input v-model="questionForm.analyse" type="textarea" />
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary" @click="submitForm()">修改题目</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  
  <script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { useRouter ,useRoute} from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const questionFormRef = ref();
let treeData = ref([]);
let questionForm = ref({
  num: "",
  examQuestion: "",
  analyse: "",
  correct_id: [],
  option1: "",
  option2: "",
  option3: "",
  option4: "",
  type: "1",
  chapterId: "",
  seriesId:"",
  sectionId:"",
  teacherId:"",
  id:""
});
onMounted(() => {
  getDetail();

});
const getDetail = async () => {
const id = route.params.id;
 
  let res = await axios.get(`/adminapi/question/one/${id}`);
  if (res.data.code == 200) {
    console.log("res", res);

    questionForm.value = res.data.data;
    // console.log("productForm.cover", productForm.value.cover);
  }
};
// const questionFormRules = reactive({
//   num: [{ required: true, message: "请输入", trigger: "blur" }],
//   examQuestion: [{ required: true, message: "请输入", trigger: "blur" }],
//   analyse: [{ required: true, message: "请输入", trigger: "blur" }],
//   correct_id: [{ required: true, message: "请输入", trigger: "blur" }],
//   option1: [{ required: true, message: "请输入", trigger: "blur" }],
//   option2: [{ required: true, message: "请输入", trigger: "blur" }],
//   option3: [{ required: true, message: "请输入", trigger: "blur" }],
//   option4: [{ required: true, message: "请输入", trigger: "blur" }],
//   type: [{ required: true, message: "请输入", trigger: "blur" }],
// });
const goBack = () => {
  router.back();
};
// const handleChange = (value) => {
//   questionForm.value.chapterId = value[3];
//   console.log("value", value);
// };
// const getTreeList = async () => {
//   let res = await axios.get("/adminapi/categoryTree/list");
//   if (res.data.code == 200) {
//     treeData.value = res.data.data;
//     console.log("treeData", treeData.value);
//   }
// };

const submitForm =async () => {
  questionFormRef.value.validate(async (valid) => {
    if (valid) {
      console.log("questionForm", questionForm.value);
     let res = await axios.post(`/adminapi/question/modifyOne`, questionForm.value);
     if(res.data.code == 200) {
        ElMessage.success('修改成功');
        router.push({
        path:'/questionManage/questionList',
        query:{
            chapterId:questionForm.value.chapterId
        }
    })
     }else{
        ElMessage.success('修改失败');
     }
    }
  });
};
</script>
  
  <style>
.cascader {
  width: 100%;
}
</style>